<template>
  <view class="mine-page">
    <image class="mine-image" src="../../static/mine-背景.jpg" alt="login-背景"></image>
    <view class="mine-info">
      <!-- <image class="mine-info-image" src="../../static/头像.png"></image> -->
      <view class="mine-info-content">
        <view class="mine-info-supplier-name">{{ supplierInfo.supplierName }}</view>
        <!-- <view>{{ supplierInfo.supplierCode }}</view> -->
        <view>登录账号：{{ supplierInfo.supplierCode }}</view>
      </view>
    </view>
    <view class="mine-list">
      <view class="mine-item" @click="gotoBaseInfo">
        <view class="mine-item-left">
          <image class="mine-left-item-image" src="../../static/基础资料icon.svg"></image>
          <view>基础资料</view>
        </view>
        <view class="mine-item-right">
          <image class="mine-right-item-image" src="../../static/右箭头icon.svg"></image>
        </view>
      </view>
      <view class="mine-item" @click="gotoBillInfo">
        <view class="mine-item-left">
          <image class="mine-left-item-image" src="../../static/票据资料icon.svg"></image>
          <view>票据资料</view>
        </view>
        <view class="mine-item-right">
          <image class="mine-right-item-image" src="../../static/右箭头icon.svg"></image>
        </view>
      </view>
      <view class="mine-item" @click="gotoProductImages">
        <view class="mine-item-left">
          <image class="mine-left-item-image" src="../../static/产品图册icon.svg"></image>
          <view>产品图册</view>
        </view>
        <view class="mine-item-right">
          <image class="mine-right-item-image" src="../../static/右箭头icon.svg"></image>
        </view>
      </view>
      <view class="mine-item" @click="gotoNotifyManage">
        <view class="mine-item-left">
          <image class="mine-left-item-image" src="../../static/账号管理icon.svg"></image>
          <view>通知中心</view>
          <div class="flex items-center" style="margin-left: 8px;">
            <up-badge type="error" max="99" :value="notifyNum.allCount|| 0"></up-badge>
          </div>
        </view>
        <view class="mine-item-right">
          <image class="mine-right-item-image" src="../../static/右箭头icon.svg"></image>
        </view>
      </view>
      <view class="mine-item" @click="gotoAccoutManage">
        <view class="mine-item-left">
          <image class="mine-left-item-image" src="../../static/账号管理icon.svg"></image>
          <view>账号管理</view>
        </view>
        <view class="mine-item-right">
          <image class="mine-right-item-image" src="../../static/右箭头icon.svg"></image>
        </view>
      </view>
    </view>
  </view>
  <CustomTabbar page="mine"></CustomTabbar>
</template>

<script setup lang="ts">
import CustomTabbar from '@/components/custom-tabbar/index.vue'
// import { supplierQuerySupplierInfo } from '@/genapi/supplier'
import { useSupplierStore } from '@/store/index'

const supplierStore = useSupplierStore()
const supplierInfo = computed(() => supplierStore.supplierInfo)
const notifyNum = computed(() => supplierStore.notifyNum)
onShow(()=>{
  supplierStore.getMessageCount()
})
// const supplierInfo = reactive({
//     supplierName: '',
//     supplierCode: '',
//     account: '',
// })

// onMounted(() => {
//   getSupplierInfo()
//   supplierInfo.account = uni.getStorageSync('account')

// })

// async function getSupplierInfo() {
//     const params = {}
//     const { data } = await supplierQuerySupplierInfo(params)
//     supplierInfo.supplierName = data.data.supplierInfo.supplierName
//     supplierInfo.supplierCode = data.data.supplierInfo.supplierCode
// }

function gotoBaseInfo() {
  uni.navigateTo({
    url: '/pages/baseInfo/index'
  })
}

function gotoBillInfo() {
  uni.navigateTo({
    url: '/pages/billInfo/index'
  })
}

function gotoProductImages() {
  uni.navigateTo({
    url: '/pages/productImages/index'
  })
}

function gotoNotifyManage() {
  uni.navigateTo({
    url: '/pages/notifyManage/index'
  })
}

function gotoAccoutManage() {
  uni.navigateTo({
    url: '/pages/accoutManage/index'
  })
}
</script>

<style scoped>
.mine-image {
  width: 100%;
  height: 526rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.mine-info {
  position: fixed;
  top: 209rpx;
  left: 24rpx;
  display: flex;
}

.mine-info-image {
  display: block;
  width: 166rpx;
  height: 166rpx;
  margin-right: 26rpx;
}

.mine-info-content {
  padding-top: 12rpx;
  padding-bottom: 12rpx;
  padding-left: 32rpx;
  line-height: 47rpx;
  color: #fff;
}

.mine-info-supplier-name {
  font-weight: 600;
  font-size: 40rpx;
  margin-bottom: 26rpx;
}

.mine-list {
  position: fixed;
  top: 433rpx;
  left: 24rpx;
  width: 702rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
}

.mine-item {
  display: flex;
  justify-content: space-between;
  padding: 26rpx 0;
}

.mine-item-left {
  display: flex;
}

.mine-left-item-image {
  display: block;
  width: 44rpx;
  height: 44rpx;
  margin-right: 24rpx;
}

.mine-right-item-image {
  display: block;
  width: 44rpx;
  height: 44rpx;
}
</style>
